<template>
    <div class="contract-library">
        <div class="table-box">
            <el-table :data="tableData" border>
                <el-table-column property="id" align="center" label="序号"></el-table-column>
                <el-table-column property="state" align="center" label="合同"></el-table-column>
                <el-table-column property="state" align="center" label="状态"></el-table-column>
                <el-table-column property="state" align="center" label="操作">
                    <template scope="scope">
                        <router-link to="" style="color: #20a0ff"><span @click="dialogSign = true">{{scope.row.operating}}</span></router-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="btn-box">
            <el-button type="primary">确定</el-button>
            <el-button>取消</el-button>
        </div>

        <el-dialog title="协议签署（在线签署）" :visible.sync="dialogSign" class="dialogSign">
            <el-form :model="ruleForm" ref="ruleForm" class="el-form" :inline="true" labelWidth="80px">
                <el-form-item label="签署方式" prop="resource" required>
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="手机短信">手机短信</el-radio>
                        <el-radio label="手写签署">手写签署</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <el-form label-width="80px" v-if="ruleForm.resource === '手机短信'">
                <el-form-item label="短信验证" required>
                    <el-input></el-input>
                    <el-button class="input-file-box">短信验证码</el-button>
                </el-form-item>
            </el-form>

            <el-form label-width="80px" v-else>
                <el-form-item label="用户签名" required>
                    <el-input></el-input>
                    <el-button class="input-file-box">获取签名</el-button>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSign = false">取 消</el-button>
                <el-button type="primary" @click="dialogSign = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "contract-library",
        data () {
            return {
                tableData: [
                    {
                        id: 1,
                        operating: "签署"
                    },
                    {
                        id: 1,
                        operating: "签署"
                    },
                    {
                        id: 1,
                        operating: "签署"
                    },
                    {
                        id: 1,
                        operating: "签署"
                    },
                    {
                        id: 1,
                        operating: "签署"
                    }
                ],
                dialogSign: false,
                ruleForm: {
                    resource: "手机短信",
                    date: "",
                    desc: ""
                }
            };
        }
    };
</script>

<style scoped lang="scss">
    .contract-library{
        .table-box{
            margin: 20px;
        }
        .btn-box{
            width: 135px;
            margin:0 auto;
        }
        .dialogSign{
            .el-form{
                width: 420px;
                margin: 0 auto;
                .el-input{
                    width: 200px;
                }
                .input-file-box{
                    position: relative;
                    width: 100px;
                    margin:0;
                    display: inline-block;
                    border: 1px solid #bfcbd9;
                    border-radius: 4px;
                    color: #1f2d3d;
                    font-size: inherit;
                    text-align: center;
                }
                .input-file{
                    width: 100px;
                    height: 36px;
                    position: absolute;
                    left: 0;
                    top:0;
                    padding: 3px 10px;
                    opacity:0;
                }
            }
        }

    }
</style>
